.chat {
	display: flex;
	height: 100%;
	flex-direction: column;

	::v-deep::-webkit-scrollbar {
		width: 5px !important;
		display: block !important;
		-webkit-overflow-scrolling: touch;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		background-color: #bbbbbb !important;
		border-radius: 5px !important;
		-webkit-overflow-scrolling: touch;
	}

	.playVideo {
		width: 100%;
		height: 90%;
	}

	.handleClose {
		text-align: center;
		margin-top: 15px;

		image {
			width: 30px;
		}
	}

	#bottom {
		height: 1px;
	}

	.com {
		flex: 1;
		overflow-y: scroll;

		.scrollView {
			transform: scale(1, -1);
			height: 100%;

			.scroll-content {
				padding: 10px;

				.timestamp {
					transform: scale(1, -1);
					text-align: center;
					margin: 20px 0;
					font-size: 12px;
					color: #848484;
				}

				.msgItem {
					display: flex;
					transform: scale(1, -1);
					margin-bottom: 15px;

					.nick_name {
						font-size: 11px;
						color: #848484;
						margin-bottom: 5px;
					}

					.content {
						view {
							display: inline-block;
						}

						.message_content {
							>view {
								position: relative;
								display: flex;

								.duration {
									position: absolute;
									color: #fff;
									font-size: 12px;
									right: 6px;
									bottom: 4px;
								}
							}

							.errorImage {
								width: 100%;
								height: 100%;
								border-radius: 5px;
								background: #ebebeb url(@/static/image/30.png) no-repeat center center;
								background-size: 26px 26px;
							}

							.errorVideo {
								width: 100%;
								height: 100%;
								border-radius: 10upx;
								background: #ebebeb;
							}

							.videoPlayIcon {
								background: url(@/static/image/31.png) no-repeat;
								background-size: 100% 100%;
								width: 26px;
								height: 26px;
								display: block;
								position: absolute;
								left: 50%;
								top: 50%;
								margin-top: -13px;
								margin-left: -13px;
							}
						}

						.text {
							font-size: 16px;
							padding: 10px;
							display: inline-block;
							word-break: break-all;
							line-height: 23px;
						}

						.voiceProgress {
							width: 230px;
							margin-top: 4px;

							.voiceFile {
								height: 43px;
								background: #ffffff url(@/static/image/50.png) no-repeat center left;
								background-size: 31px 31px;
								border-radius: 2px 10px 10px 10px;
								padding: 10px 6px;
								min-width: 60px;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								padding-left: 31px;


							}

							.playIcon {
								background: #ffffff url(@/static/image/2.gif) no-repeat center left;
								background-size: 31px 31px;
							}

							.voiceFile:active {
								opacity: 0.8;
							}
						}



						.operateFile {
							background: #ffffff;
							padding: 15px 12px;
							width: 200px;
							display: flex;
							justify-content: space-between;

							>view:nth-child(1) {
								width: 150px;

								>view {
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									display: block;
									text-align: left;
									font-size: 12px;
									color: rgba(0, 0, 0, 0.5);
									line-height: 1.4;
								}

								>view:nth-child(1) {
									font-size: 16px;
									color: #333333;
									margin-bottom: 3px;
								}
							}

							>view {
								>image {
									width: 36px;
									height: 41px;
								}
							}
						}

						.redCom {
							.red {
								background: #E45757;
								border-radius: 10px 10px 10px 10px;
								width: 230px;
								text-align: left;

								&.disabled {
									background: #E49898;

									>view:nth-child(1) {
										background: url(@/static/image/62.png) no-repeat center left 15px;
										background-size: 25px 31px;
									}

								}


								>view:nth-child(1) {
									display: block;
									padding: 15px;
									border-bottom: 1px solid rgba(255, 255, 255, 0.1);
									background: url(@/static/image/61.png) no-repeat center left 15px;
									background-size: 25px 31px;
									padding-left: 50px;

									>view:nth-child(1) {
										font-size: 16px;
										color: #FFFFFF;
										display: block;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}

									>view:nth-child(2) {
										color: #FFFFFF;
										line-height: 16px;
										display: block;
										font-size: 11px;
										margin-top: 3px;

									}
								}

								>view:nth-child(2) {
									font-size: 11px;
									color: #FFFFFF;
									padding: 5px 15px;

								}

							}
						}


						.quote {
							display: flex;

							>view:nth-child(1) {
								display: flex;
								justify-content: flex-start;
								background: #d4d4d4;
								border-radius: 4px 4px 4px 4px;
								margin-top: 5px;
								font-size: 12px;
								color: rgba(0, 0, 0, 0.5);
								padding: 6px 10px;
								line-height: 18px;
							}

							.quoteName {
								white-space: nowrap;
							}

							::v-deep .message_content {
								width: auto;

								.text {
									background: transparent;
									font-size: 12px;
									padding: 0;
									color: rgba(0, 0, 0, 0.5);
									line-height: 18px;
								}
							}
						}
					}

					&.left {
						flex-direction: row;
						padding-right: 15%;

						.u-avatar {
							margin-right: 10px;
						}

						.content {
							.text {
								border-radius: 2px 10px 10px 10px;
								background: #ffffff;
								color: #333333;
							}

							.operateFile {
								border-radius: 2px 10px 10px 10px;
							}
						}
					}

					&.right {
						flex-direction: row-reverse;
						text-align: right;
						padding-left: 15%;

						.quote {
							display: flex;
							justify-content: flex-end;
						}

						.u-avatar {
							margin-left: 10px;
						}

						.content {
							display: flex;
							justify-content: flex-end;

							.text {
								background: #22B1FF;
								border-radius: 10px 2px 10px 10px;
								color: #ffffff;
								text-align: left;
							}

							.operateFile {
								border-radius: 10px 2px 10px 10px;
							}

							.voiceProgress {
								width: 230px;
								display: flex;
								justify-content: flex-end;

								.voiceFile {
									height: 43px;
									background: #22B1FF url(@/static/image/49.png) no-repeat center right;
									background-size: 31px 31px;
									justify-content: flex-end;
									color: #fff;
									border-radius: 10px 2px 10px 10px;
									padding-right: 31px;

								}

								.playIcon {
									background: #22B1FF url(@/static/image/3.gif) no-repeat center right;
									background-size: 31px 31px;
								}
							}


						}
					}
				}
			}
		}
	}

	.chatInput {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		background: #f0f0f0;

		.ipt {
			padding: 8px 10px;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.icon {
				display: flex;
				align-items: center;

				.voice,
				.emoji,
				.operate,
				.send,
				.keyboard {
					width: 30px;
					height: 30px;
					display: block;
					margin-bottom: 5px;
				}

				.voice {
					background: url(@/static/image/26.png) no-repeat;
					background-size: 100% 100%;
					margin-right: 10px;
				}

				.keyboard {
					background: url(@/static/image/48.png) no-repeat;
					background-size: 100% 100%;
					margin-right: 10px;
				}

				.emoji {
					background: url(@/static/image/27.png) no-repeat;
					background-size: 100% 100%;
					margin-left: 10px;
				}

				.operate {
					background: url(@/static/image/28.png) no-repeat;
					background-size: 100% 100%;
					margin-left: 10px;
				}

				.send {
					background: url(@/static/image/29.png) no-repeat;
					background-size: 100% 100%;
					margin-left: 10px;
				}
			}

			.textarea-container {
				background: #ffffff;
				border-radius: 4px;
				padding: 10px;
				flex: 1;
				display: flex;
				min-height: 43px;
				box-sizing: border-box;

				textarea {
					width: 100%;
					/* 使 textarea 自适应父容器 */
					height: 23px;
					border: none;
					outline: none;
					resize: none;
					/* 禁用拖动调整大小 */
					background: transparent;
					/* 防止背景颜色覆盖 */
				}
			}
		}

		.isIos {
			padding-bottom: env(safe-area-inset-bottom);
		}

		.voiceBtn {
			text-align: center;
			width: 100%;
			background: #ffffff;
			border-radius: 4px;
			padding: 10px;
			flex: 1;
			display: flex;
			justify-content: center;
			min-height: 43px;
			box-sizing: border-box;
		}

		.voiceBtn:active {
			opacity: 0.7;
		}

		.emojiCom {
			padding-left: 12px;
			position: relative;
			transition: all 0.2s;
			height: 0;
			overflow: hidden;
			border-top: 1px solid rgba(0, 0, 0, 0.1);

			.list {
				width: 100%;
				height: 240px;
				overflow-y: auto;

				>view {
					float: left;
					display: block;
					font-size: 24px;
					width: calc(100% / 9);
					margin-right: 10px;
					padding-top: 14px;
					text-align: center;
				}

				>view:nth-child(7n) {
					margin-right: 0;
				}

				>view:active {
					opacity: 0.8;
				}
			}
		}

		.operateCom {
			position: relative;
			transition: all 0.2s;
			height: 0;
			overflow: hidden;
			padding: 0 12px;

			.list {
				width: 100%;
				height: 240px;
				padding: 40px 0;

				>view {
					width: 25%;
					text-align: center;
					font-size: 12px;
					color: #3d3d3d;
					display: inline-block;
					margin-bottom: 30px;

					>view:nth-child(1) {
						width: 55px;
						height: 55px;
						background: #ffffff;
						border-radius: 7px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 auto 6px;

						>image {
							width: 25px;
							height: 25px;
						}
					}
				}
			}
		}

		.heightCom {
			height: 500upx;
			transition: all 0.2s;
		}

		.voiceCom {
			text-align: center;
			position: absolute;
			bottom: 0;
			width: 100%;

			.git {
				.gitIcon {
					width: 178px;
					height: 58px;
					border-radius: 15px 15px 15px 15px;
					background: #22B1FF url(@/static/image/1.gif) no-repeat center center;
					background-size: contain;
					margin: 0 auto;
					position: relative;
					transition: all 0.3s;

					&::after {
						content: '';
						width: 14px;
						height: 6px;
						display: block;
						background: url(@/static/image/43.png) no-repeat center center;
						background-size: 13px 6px;
						position: absolute;
						bottom: -6px;
						left: 50%;
						margin-left: -7px;
						transition: all 0.3s;
					}
				}

				.voiceTime {
					font-size: 14px;
					color: rgba(255, 255, 255, 0.8);
					margin-top: 12px;
				}
			}

			.gitText {
				margin-top: 74px;

				.voiceClose {
					opacity: 0;
					transition: all 0.3s;
					font-size: 12px;
					color: rgba(255, 255, 255, 0.7);
					margin-bottom: 10px;
				}

				.closeIcon {
					margin-bottom: 45px;
					transition: all 0.3s;

					>i {
						background: url(@/static/image/40.png) no-repeat;
						background-size: 100% 100%;
						width: 60px;
						height: 60px;
						display: block;
						margin: 0 auto;
						transition: all 0.3s;
					}
				}

				.voiceSend {
					font-size: 12px;
					color: rgba(255, 255, 255, 0.7);
				}
			}

			.voiceBg {
				background: url(@/static/image/42.png) no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 140px;
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s;

				>i {
					background: url(@/static/image/41.png) no-repeat;
					background-size: 100% 100%;
					width: 31px;
					height: 31px;
					display: block;
				}
			}
		}

		.closeVoice {
			.git {
				.gitIcon {
					background: #d45252 url(@/static/image/1.gif) no-repeat center center;
					background-size: contain;

					&::after {
						background: url(@/static/image/45.png) no-repeat center center;
						background-size: 13px 6px;
					}
				}
			}

			.gitText {
				.voiceClose {
					opacity: 1 !important;
					transition: all 0.3s;
				}

				.voiceSend {
					opacity: 0 !important;
					transition: all 0.3s;
				}

				.closeIcon {
					>i {
						background: url(@/static/image/46.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.voiceBg {
				background: url(@/static/image/47.png) no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 140px;
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: center;

				>i {
					opacity: 0;
				}
			}
		}


	}

	.determineYouGroup {
		text-align: center;
		color: #848484;
		padding: 20px;
	}

	.longPressPop {
		.title {
			font-weight: 600;
			font-size: 18px;
			color: rgba(0, 0, 0, 0.8);
			text-align: center;
			position: relative;
			padding: 16px;

			>i {
				position: absolute;
				right: 16px;
				background: url(@/static/image/51.png) no-repeat;
				background-size: 100% 100%;
				width: 22px;
				height: 22px;
				display: block;
				top: 18px;
			}
		}

		.popList {
			padding-bottom: 20px;

			>view {
				background: #F4F4F4;
				border-radius: 5px 5px 5px 5px;
				padding: 14px 10px;
				font-size: 16px;
				color: rgba(0, 0, 0, 0.8);
				margin: 5px 15px 0;
				display: flex;
				align-items: center;

				>i {
					background: url(@/static/image/52.png) no-repeat;
					background-size: 100% 100%;
					width: 23px;
					height: 23px;
					display: block;
					margin-right: 10px;
				}
			}
		}

	}

	.receiveRedEnvelope {
		background: transparent;

		>view:nth-child(1) {
			width: 283px;
			height: 420px;
			background: #ebebeb url(@/static/image/63.png) no-repeat center center;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding-top: 50px;
			text-align: center;
			position: relative;

			.userInfo {
				font-size: 11px;
				color: #FFEABB;

				.avatar {
					margin: 0 auto 10px;
				}
			}

			.remarks {
				font-size: 19px;
				color: #FFEABB;
				margin-top: 15px;
			}

			.open {
				width: 80px;
				height: 80px;
				background: #FFE8C9;
				box-shadow: 0px 1 1px 0px rgba(222, 22, 23, 0.5008);
				font-weight: 600;
				font-size: 30px;
				color: #735652;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				position: absolute;
				bottom: 90px;
				left: 50%;
				margin-left: -40px;
			}

			.open:active {
				opacity: 0.9;
			}

			.redOpen {
				animation: rotate 0.7s linear infinite;
			}

			@keyframes rotate {
				from {
					transform: rotateY(0deg);
				}

				to {
					transform: rotateY(360deg);
				}
			}

			.look {

				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 20px;
				width: 100%;

				>view {
					font-size: 11px;
					color: #FFEABB;
					background: url(@/static/image/68.png) no-repeat right center;
					background-size: 12px 12px;
					padding-right: 16px;

				}
			}
		}

		>view:nth-child(2) {

			>i {
				background: url(@/static/image/64.png) no-repeat;
				background-size: 100% 100%;
				width: 42px;
				height: 42px;
				display: block;
				margin: 40px auto 0;
			}
		}
	}

}